iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 20
0
自我挑戰組

使用flutter建構Android和iOs APP系列 第 20

橫向手機時的樣式,使用者手勢監聽器

  • 分享至 

  • xImage
  •  
  1. pages/auth.dart
    希望橫向時,input不要太長
    如此連結
    Widget build(BuildContext context) {
    final double deviceWidth = MediaQuery.of(context).size.width;
    //手機目前寬度
    final double targetWidth = deviceWidth > 550.0 ? 500.0 : deviceWidth * 0.95;
    //寬度大於550的話就500,小於的話就手機寬度乘以0.95
    return Scaffold(
        appBar: AppBar(...),
        body: Container(
        ...
        child: Center(
            child: SingleChildScrollView(
            child: Container(
                width: targetWidth,
                child: Column(
                children: <Widget>[...],
                ),
            ),
            ),
        ),
        ),
  1. pages/products_create.dart

    @override
    Widget build(BuildContext context) {
    final double deviceWidth = MediaQuery.of(context).size.width;
    final double targetWidth = deviceWidth > 550.0 ? 500.0 : deviceWidth * 0.95;
    final double targetPadding = deviceWidth - targetWidth;
    return Container(
        margin: EdgeInsets.all(10.0),
        child: ListView(
        //listView使用width時會沒反應,故使用padding來避免input太長
        padding: EdgeInsets.symmetric(horizontal: targetPadding / 2),
        //水平方向的padding左右皆為手機寬減想要寬再除以二
        children: <Widget>[
            ...
            // GestureDetector(
                //此組建可以自定義使用者手勢事件
                //長按、按兩下....
            //   onTap: _submitForm,
            //   child: Container(...),
            // )
        ],
        ),
    );

上一篇
整理檔案架構:把組件跟公版拆出來
下一篇
登入與新增商品的驗證,橫向時確認input可視
系列文
使用flutter建構Android和iOs APP25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言